<template>
  <UserlnfoComp>
    <div>游戏管理</div>
  </UserlnfoComp>

  <!-- 查询 -->
  <div>
    <el-form inline="true">
      <el-form-item>
        <el-input v-model="queryInfo.gname" placeholder="游戏名模糊查询"></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-input placeholder="所属发行商"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button-group>
          <el-button type="danger">重置</el-button>
          <el-button @click="reset" type="primary">查询</el-button>
          <el-button @click="restAdd" type="success">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>

  <!-- 数据呈现 -->
  <el-table :data="list" stripe>
    <el-table-column label="游戏名称" prop="gname"></el-table-column>
    <el-table-column label="游戏简介" prop="intro"></el-table-column>
    <el-table-column label="游戏发布时间">
      <template #default="scoped">
        {{ tools.formatDate(scoped.row.created) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scoped">
        <el-button type="success" size="small">修改</el-button>
        <el-button type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加 -->
  <el-dialog v-model="avisible">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="addInfo.publisher" placeholder="游戏名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="游戏简介"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="addInfo.created"
            type="date"
            placeholder="开始时间"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="add" type="primary">添加</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import UserlnfoComp from '@/components/UserlnfoComp.vue'
import api from '@/js/ajax'
import tools from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

onMounted(() => {
  query()
})

//#region 查询
const page = ref({ pageNumber: 1, pageSize: 10 })
const queryInfo = ref({
  gname: '',
  intro: '',
  created: '',
})

const list = ref([])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  queryInfo.value = {
    gname: '',
    intro: '',
    created: '',
  }
  requery()
}

const query = () => {
  api.get(`/crud/game/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (data) => {
    if (data.success) {
      page.value = data.data.pageBean
      list.value = data.data.data
      return
    }
    ElMessageBox.alert(data.message, '错误')
  })
}
// #endregion

// #region 添加

const avisible = ref(false)
const addInfo = ref({
  stid: '',
  gname: '',
  intro: '',
  created: '',
})
const restAdd = () => {
  typemode.value = 'add'
  addInfo.value = {
    stid: '',
    gname: '',
    intro: '',
    created: '',
  }
  addButton.value = '请选择分类...'
  avisible.value = true
}

const add = () => {
  api.post('/crud/game', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('添加成功')
      avisible.value = false
      return
    }
    ElMessageBox.alert(data.message, '错误')
  })
}

// #endregion
const addButton = ref('请选择分类...')

const type = ref({})
const tvisible = ref(false)
const typemode = ref('add')

const selectedType = (typeinfo) => {
  type.value = typeinfo
}
</script>

<style scoped></style>
